<template>
  <div class="login-container">
    <div class="logo-container">
      <img class="logo" alt="soul" :src="logo" />
      <div class="title">Soul Admin</div>
    </div>
    <div class="login-box">
      <n-form :label-width="80" label-placement="left" :model="form" :rules="rules" ref="formRef">
        <n-form-item>
          <div class="welcome">欢迎访问</div>
        </n-form-item>
        <n-form-item path="username">
          <n-input v-model:value="form.username" size="large" placeholder="请输入用户名">
            <template #prefix>
              <n-icon size="25">
                <user-outlined />
              </n-icon>
            </template>
          </n-input>
        </n-form-item>
        <n-form-item path="password">
          <n-input
            placeholder="请输入密码"
            size="large"
            :type="showPassword ? 'text' : 'password'"
            v-model:value="form.password"
          >
            <template #prefix>
              <n-icon size="25">
                <lock-outlined />
              </n-icon>
            </template>
            <template #suffix>
              <n-icon size="25" class="show-password" @click="showPassword = !showPassword">
                <template v-if="showPassword">
                  <eye-invisible-filled />
                </template>
                <template v-else>
                  <eye-filled />
                </template>
              </n-icon>
            </template>
          </n-input>
        </n-form-item>

        <n-form-item>
          <div class="forget-password">忘记密码？</div>
        </n-form-item>
        <n-form-item>
          <n-button
            @click="handleLogin"
            class="login-button"
            :loading="loading"
            size="large"
            type="info"
            attr-type="button"
            >登录
          </n-button>
        </n-form-item>
      </n-form>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import logo from '/@/assets/img/logo-40x40.png';
  import { EyeFilled, EyeInvisibleFilled, LockOutlined, UserOutlined } from '@vicons/antd';
  import { NButton, NForm, NFormItem, NIcon, NInput, useMessage } from 'naive-ui';
  import router from '/@/router';

  const showPassword = ref(false);
  const form = ref({
    username: 'admin',
    password: 'admin',
  });
  const message = useMessage();
  const formRef = ref();
  const rules = ref({
    username: { required: true, message: '用户名不能为空', trigger: 'blur' },
    password: { required: true, message: '密码不能为空', trigger: 'blur' },
  });
  const loading = ref(false);
  const handleLogin = function (): void {
    formRef.value.validate((errors: any) => {
      if (!errors) {
        if (form.value.username === 'admin' && form.value.password === 'admin') {
          const messageReactive = message.loading('登录中', {
            duration: 0,
          });
          loading.value = true;
          setTimeout(() => {
            messageReactive.destroy();
            router.push('/');
            loading.value = false;
          }, 1000);
        } else {
          message.error('账号或密码错误！');
        }
      } else {
        message.error('Invalid');
      }
    });
  };
</script>

<style scoped lang="scss">
  .login-container {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #021048, #1e38a3);
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;

    .logo-container {
      height: 26vh;
      max-height: 286px;
      min-height: 170px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      .title {
        font-size: 3em;
        color: white;
        margin-left: 10px;
      }
    }

    .login-box {
      width: 480px;
      font-size: 15px;
      background: white;
      padding: 36px 56px 48px;
      box-shadow: 0 4px 32px 0 rgb(10 14 29 / 2%), 0 8px 64px 0 rgb(10 14 29 / 8%);
      border-radius: 3px;

      .welcome {
        font-size: 20px;
        font-weight: 500;
        text-align: center;
      }

      .show-password {
        cursor: pointer;
      }

      .forget-password {
        color: #525666;
        width: 100%;
        cursor: pointer;
        text-align: right;
      }

      .login-button {
        font-size: 17px;
        width: 100%;
      }
    }
  }
</style>
